﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
			<c:set var="ctx" value="${pageContext.request.contextPath}" />
			<!DOCTYPE html>
			<html>

			<head>
				<link rel="stylesheet" href="${ctx}/common/common.css">
				<meta charset="utf-8">
				<title>关联半成品</title>
				<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
				<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
				<script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

				<script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
				<script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
				<style type="text/css">
					.container {
						padding: 40px 20px;
						background: #fff;
						margin: 20px 0;
					}
					.container ul.data-list {
						width: 40%;
						border: 1px solid #e5e5e5;
					}
					.container ul.data-list li {
						line-height: 32px;
						padding: 0px 10px;
						width: 360px;
						overflow: hidden;
						height: 30px;
					}
					.container ul.data-list li:hover {
						background-color: rgba(0, 150, 136, 0.73);
						color: #fff;
						cursor: pointer;
						font-weight: bold;
						transition: 0.4s;
					}
					.container ul.data-list li.selected {
						background-color: #009688;
						color: #fff;
					}
					.container ul.data-list li.selectedDel {
						background-color: #009688;
						color: #fff;
					}
					.button-box {
						width: 20%;
						display: flex;
						justify-content: space-between;
						padding: 20px;
						gap: 5px;
					}
					.container-ul {
						display: flex;
					}
					.hidden {
						display: none;
					}
					.tianjia {
						width: 80px;
						height: 38px;
						padding: 0 18px;
						background-color: #009688;
						color: #fff;
						border: none;
						cursor: pointer;
					}

					.tianjia:hover {
						opacity: 0.8;
					}
					.shanchu {
						width: 80px;
						height: 38px;
						padding: 0 18px;
						background-color: #ff5722;
						color: #fff;
						border: none;
						cursor: pointer;
					}
					.shanchu:hover {
						opacity: 0.8;
					}
					.data-list span {
						margin-left: 5px;
					}
					.fanhui {
						width: 80px;
						height: 38px;
						padding: 0 18px;
						background-color: #ffffff;
						color: #000;
						cursor: pointer;
						border: 1px solid #e5e5e5;
					}
					.fanhui:hover {
						opacity: 0.8;
					}
					.layui-col-space12 {
						display: flex;
						padding: 20px 0;
					}
					.layui-col-md5 {
						margin-left: 15%;
					}
				</style>
			</head>

			<body>
				<div class="container">
					<div class="layui-row layui-col-space12">
						<div class="layui-col-md7">
							<h5>未配置工艺</h5>
						</div>
						<div class="layui-col-md5">
							<h5>已配置工艺</h5>
						</div>
					</div>
					<div class="container-ul">
						<ul class="data-list" id="lList">
							<c:forEach items="${otherProcessList}" var="osl">
								<li>代码：${osl.code}<span>名称：${osl.name}</span>
									<input type="hidden" value="${osl.id}" class="selectSermigood">
								</li>
							</c:forEach>
						</ul>
						<div class="button-box">
							<button type="button" name="button" id="add" class="tianjia">添 加</button>
							<button type="button" name="button" id="remove" class="shanchu">删 除</button>
							<button type="button" id="rollback" class="layui-btn layui-btn-primary fanhui">返回</button>
						</div>
						<ul class="data-list" id="rList">
							<c:forEach items="${myProcessList}" var="msl">
								<li>代码：${msl.code}<span>名称：${msl.name}</span>
									<input type="hidden" value="${msl.id}" class="selectSermigood">
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
				<script type="text/javascript">
					$(function () {
						var lList = $("#lList");
						var llList = document.getElementById("lList");
						var rList = $("#rList");
						var items = $(".data-list li");
						for (var i = 0; i < items.length; i++) {
							items[i].onclick = itemsclick;
							items[i].ondblclick = itemsdblclick;
						}
						function itemsdblclick() {
							var ids = new Array();
							var id = $(this).find("input").val();
							ids.push(id);
							var obj = this
							if (this.parentNode == llList) {
								$.ajax({
									url: "${ctx}/productProcess/addProductProcess",
									data: { segoodIds: ids.toString(), prodId: ${ proId }}, //请求的附加参数，用json对象
							method: 'POST',
								async: false,
									success: function (data) {
										if (data == '1') {
											obj.className = "selectedDel";
											rList.append(obj);
										} else {
											layer.alert("移动失败");
										}
									}
						});
			}else {
						$.ajax({
							url: "${ctx}/productProcess/delProductProcess",
							data: { segoodIds: ids.toString(), prodId: ${ proId }}, //请求的附加参数，用json对象
					method: 'POST',
						async: false,
							success: function (data) {
								if (data == '1') {
									obj.className = "selected";
									lList.append(obj);
								} else {
									layer.alert("移动失败");
								}
							}
                });
			}
		}
					function itemsclick() {
						var classname = this.className;
						if (classname == "selected" || classname == "selectedDel") {
							this.className = "";
						} else {
							if ($(this).parent().attr("id") == 'lList') {
								this.className = "selected";
							} else {
								this.className = "selectedDel";
							}
						}
					}
					function itemsMove() {
						if (this.id === "add") {
							var ids = new Array();
							var items = $(".data-list li.selected");
							for (var i = 0; i < items.length; i++) {
								var id = $(items[i]).find("input").val();
								ids.push(id);
							}
							$.ajax({
								url: "${ctx}/productProcess/addProductProcess",
								data: { segoodIds: ids.toString(), prodId: ${ proId }}, //请求的附加参数，用json对象
						method: 'POST',
							async: false,
								success: function (data) {
									if (data == '1') {
										for (var i = 0; i < items.length; i++) {
											items[i].className = "";
											items[i].className = "selectedDel";
											rList.append(items[i]);
										}
									} else {
										layer.alert("移动失败");
									}
								}
					});
			}else {
						var ids = new Array();
						var items = $(".data-list li.selectedDel");
						for (var i = 0; i < items.length; i++) {
							var id = $(items[i]).find("input").val();
							ids.push(id);
						}
						$.ajax({
							url: "${ctx}/productProcess/delProductProcess",
							data: { segoodIds: ids.toString(), prodId: ${ proId }}, //请求的附加参数，用json对象
					method: 'POST',
						async: false,
							success: function (data) {
								if (data == '1') {
									for (var i = 0; i < items.length; i++) {
										items[i].className = "";
										items[i].className = "selected";
										lList.append(items[i]);
									}
								} else {
									layer.alert("移动失败");
								}
							}
                });
			}
		}
					$("#add").on("click", itemsMove);
					$("#remove").on("click", itemsMove);
	});
					document.getElementById("rollback").addEventListener("click", function () {
						window.history.back();
					})
				</script>
			</body>

			</html>